<template>
  <div>
    <div class="img"><img src="../../../assets/images/aus1.jpg" alt="" /></div>
    <!-- 标题组件 -->
    <xtltie :xtitle="xtitle"></xtltie>
    <div class="bj">
      <div class="box">
        <div class="box-img">
          <el-carousel
            :interval="4000"
            type="card"
            height="570px"
            indicator-position="none"
          >
            <img src="../../../assets/images/cer1.jpg" alt="" />
          </el-carousel>
          <img class="img" src="../../../assets/images/cer2.jpg" alt="" />
        </div>
      </div>
      <!-- 返回顶部按钮 -->
      <div class="gotop" v-if="checked">
        <div @click="jumpwinery">
          <img src="../../../assets/images/aus2.jpg" alt="" /><span
            >燕庄介绍</span
          >
        </div>
        <div @click="jumpidea">
          <img src="../../../assets/images/aus3.jpg" alt="" /><span
            >经营理念</span
          >
        </div>
        <div @click="jumpcertificate">
          <img src="../../../assets/images/aus4.jpg" alt="" /><span
            >荣誉证书</span
          >
        </div>
        <div @click="gotop">
          <img src="../../../assets/images/aus5.jpg" alt="" /><span
            >行业优势</span
          >
        </div>
        <div class="btn" @click="gotop">
          <img src="../../../assets/images/btn4.png" alt="返回顶部" /><span
            >返回顶部</span
          >
        </div>
      </div>
      <!-- 底部导航 -->
      <bottom-nav></bottom-nav>
    </div>
  </div>
</template>

<script>
import bottomNav from "../../../components/bottomNav.vue";
//导入标题组件
import Xtltie from "../../../components/Xtltie.vue";
export default {
  name: "certificate",
  components: { Xtltie, bottomNav },
  data() {
    return {
      checked: false,
      xtitle: {
        name: "荣誉证书",
        nameEnglish: "Certificate of honor",
      },
    };
  },
  methods: {
    chnegeChecked() {
      let that = this;
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (scrollTop > 700) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //跳转到酒庄介绍
    jumpwinery() {
      this.$router.push({ path: "/frontPage/winery" });
    },
    //跳转到经营理念
    jumpidea() {
      this.$router.push({ path: "/frontPage/idea" });
    },
    //跳转荣誉证书
    jumpcertificate() {
      this.$router.push({ path: "/frontPage/certificate" });
    },
    // 返回顶部
    gotop() {
      document.documentElement.scrollTop = 0;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.chnegeChecked, true);
  },
  beforeRouteEnter(to, from, next) {
    // A跳转到B，B页面停留在A页面的滚动位置；解决方法：将scrollTop设置为0
    window.scroll(0, 0);
    next();
  },
};
</script>

<style lang="less" scoped>
.img {
  img {
    width: 100%;
  }
}
.bj {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 6%;
  background: url("../../../assets/images/bbjj_02.jpg") center no-repeat;
  background-size: 100% 100%;
  .box {
    width: 80%;
    margin: auto;
    margin-bottom: 30%;
    .box-img {
      margin-top: 90px;
      .img {
        position: absolute;
        right: 250px;
        bottom: 300px;
      }
    }
  }
  // 返回顶部按钮
  .gotop {
    width: 100px;
    position: fixed;
    right: 50px;
    bottom: 366px;
    font-size: 15px;
    background-color: #ffffff;
    div {
      width: 100px;
      height: 100px;
      padding-bottom: 10px;
      border: 1px solid #dddddd;
      img {
        margin-top: 20px;
        padding-bottom: 10px;
      }
      span {
        display: block;
      }
    }
    .btn {
      width: 100px;
    }
  }
}
</style>